<template>
    <div :style="{
        'max-width': proxy.bodyMaxWidth+'px',
        'min-width': proxy.bodyMinWidth+'px',
    }" class="main-container">
    <div class="header" v-show="NavActionStore.showHeader" :style="{
      'background' :` url('${backgroundImage} ')`
    }"><Heder /></div>
<!--      固定头部 导航-->
    <div v-if="showFixedHeader && NavActionStore.fixedHeader || NavActionStore.forceFixedHeader " class="header-fixed"><Heder theme="dark"/></div>
<!--      固定头部 分类-->
      <div v-show="showFixedCategory" v-if="NavActionStore.fixedCategory"
           class="category-fixed"
           :style="{
        'max-width': proxy.bodyMaxWidth+'px',
         'min-width': proxy.bodyMinWidth+'px',
        }"
        @mouseover="lineCategoryMouseHandler(1)"
        @mouseout="lineCategoryMouseHandler(0)"
      >
        <div class="category-fixed-inner">
          <Category :show-type="1" :mouseOver="mouseOver"></Category>
        </div>
      </div>
    <div class="body-container"
    :style="{
      'max-width': proxy.bodyMaxWidth+'px',
       'min-width': proxy.bodyMinWidth+'px',
    }"
    >
      <div class="category"  v-show="NavActionStore.showCategroy">
        <Category></Category>
      </div>
      <div class="body-main">
        <router-view></router-view>
      </div>
    </div>
      <Account></Account>
    </div>
</template>
<script setup>
import Heder from "./Header.vue";
import Account from "@/views/user/Account.vue";
import {computed, getCurrentInstance, onBeforeMount, onMounted, onUnmounted, ref} from "vue";
import Category from "@/views/home/Category.vue";
import {mitter} from "@/eventbus/eventBus.js";
import {useCategoryStore} from "@/stores/categoryStore.js";
import {useLoginStore} from "@/stores/loginStore.js";
import Request, {ImgURL} from "@/utils/Request.js";
import {Api} from "@/api/index.js";
import {GetRefresh, tximgUrl} from "@/api/user.js";
import navActionStore from "@/stores/navActionStore.js";
import VueCookies from 'vue-cookies'
import category_loadAllCategory from "@/data/category_loadAllCategory.json"

const proxy = getCurrentInstance();

const localStorage = useLoginStore();
const categoryStore = useCategoryStore()
const imgSur = "/img/banner-bg2.png"
// 监听滚动事件
onMounted(()=>{
    window.addEventListener("scroll",windowScrollHandler);
})

// 控制顶部显示隐藏
const showFixedHeader = ref(false);
// 固定头部分类
const showFixedCategory = ref(false);

const mouseOver = ref(false);
// 鼠标悬停事件处理函数
const lineCategoryMouseHandler = (type)=>{
  if(type === 1){
    mouseOver.value = true;
  }else{
    mouseOver.value = false;
  }
}
const NavActionStore = navActionStore();
// 滚动事件处理函数
const windowScrollHandler = ()=>{
  const curScrollTop = window.scrollY;
  if(curScrollTop>=40){
    showFixedHeader.value = true;
  }else{
    showFixedHeader.value = false;
  }
  if(curScrollTop > 250){
    showFixedCategory.value = true;
  }else{
    showFixedCategory.value = false;
  }
  mitter.emit("windowScroll",curScrollTop);
}

const windowResetScrollHandler = ()=>{
  mitter.emit("windowResize");
}

//分类数据
let categoryList = []
let categoryMap = {}

const loadCategory = async () => {
  let result = category_loadAllCategory;
  categoryList = result.data
  categoryList.forEach(item => {
    categoryMap[item.categoryCode] = item
    item.children.forEach(child => {
      categoryMap[child.categoryCode] = child
    })
  })
  categoryStore.saveCategoryMap(categoryMap)
  categoryStore.saverCategoryList(categoryList)
}

//自动刷新token
const autoRefreshToken = async ()=>{
  let result = await GetRefresh();
  //存储到sessionStorage
  sessionStorage.setItem("refreshToken","YES");
  if(result.code === 200) {
    localStorage.setToken(result.data.token);
    VueCookies.set("token",result.data.token);
  }
}

onBeforeMount(()=>{
  loadCategory()
  if((sessionStorage.getItem("refreshToken") === null) && !(VueCookies.get("token") === null)){
    autoRefreshToken();
  }
})

onMounted(()=>{
  window.addEventListener("scroll",windowScrollHandler);
  window.addEventListener("reset",windowScrollHandler);
})

onUnmounted(()=>{
  window.removeEventListener("scroll",windowResetScrollHandler);
  window.removeEventListener("reset",windowResetScrollHandler);
})

const backgroundImage = computed( ()=>{
  const background = categoryStore.currentCategory ? categoryStore.currentCategory.background : null;
  if(background){
    return ImgURL + background;
  }else{
    return ImgURL + imgSur;
  }
})
</script>
<style>
body{
  background: #ebebeb !important;
  padding: 0 !important;
  margin: 0 !important;
}
</style>
<style lang="scss" scoped>
.main-container{
  background: white;
  margin: 0 auto;
  min-height: calc(100vh);
  position: relative;
  .header{
    margin: 0 auto;
    background-color: #7c9ce1;
    height: min(240px,180px);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    position: relative;
  }
}
.video-list{
  z-index: 200;
}
.header-fixed{
  position: fixed;
  width: 100%;
  z-index: 1001;
  background: white;
  top: 0px;
  height: 64px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
.category-fixed{
  position: fixed;
  top: 64px;
  width: 100%;
  z-index: 1000;
  background: white;
  padding: 10px 150px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  .category-fixed-inner{
    margin: 0 auto;
  }
}
.body-container{
  .category{
    margin: 15px auto;
    padding: 5px;
  }
}
@media screen and (max-width: 1500px) {
  .main-container{
    .body-container{
      padding: 0 60px;
    }
  }
}
.body-container{
  padding: 0 60px;
}
</style>